import React, { useState, useEffect } from "react";
import { Page, useNavigate, useLocation } from "zmp-ui";
import { useI18n } from "../i18n";
import Navbar from "../components/navbar";

const PaymentSuccessPage: React.FunctionComponent = () => {
  const { t } = useI18n();
  const navigate = useNavigate();
  const location = useLocation();
  
  const [orderInfo, setOrderInfo] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 从路由参数或state中获取订单信息
    const orderData = location.state?.orderInfo || location.state;
    if (orderData) {
      setOrderInfo(orderData);
    }
    setIsLoading(false);
  }, [location.state]);

  const handleViewOrder = () => {
    // 跳转到订单详情页面
    if (orderInfo?.orderId) {
      navigate(`/order-detail/${orderInfo.orderId}`);
    } else {
      navigate('/orders');
    }
  };

  const handleBackToHome = () => {
    navigate('/');
  };

  if (isLoading) {
    return (
      <Page className="page" style={{ backgroundColor: '#F5F5F7', padding: 0 }}>
        <div style={{ position: 'sticky', top: 0, zIndex: 100 }}>
          <Navbar title={t('payment.successTitle')} />
        </div>
        <div style={{ padding: '20px', textAlign: 'center' }}>
          <div>{t('payment.loading')}</div>
        </div>
      </Page>
    );
  }

  return (
    <Page className="page" style={{ backgroundColor: '#F5F5F7', padding: 0 }}>
      <div style={{ position: 'sticky', top: 0, zIndex: 100 }}>
        <Navbar title={t('payment.successTitle')} />
      </div>

      <div style={{ 
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '40px 20px'
      }}>
        {/* 成功图标 */}
        <div style={{
          width: '80px',
          height: '80px',
          backgroundColor: '#4CAF50',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: '24px'
        }}>
          <span style={{ 
            color: '#fff', 
            fontSize: '40px',
            fontWeight: 'bold'
          }}>
            ✓
          </span>
        </div>

        {/* 成功标题 */}
        <div style={{
          fontSize: '24px',
          fontWeight: 'bold',
          color: '#333',
          textAlign: 'center',
          marginBottom: '12px'
        }}>
          {t('payment.paymentSuccess')}
        </div>

        {/* 成功描述 */}
        <div style={{
          fontSize: '16px',
          color: '#666',
          textAlign: 'center',
          marginBottom: '32px',
          lineHeight: '1.5'
        }}>
          {t('payment.paymentSuccessDesc')}
        </div>

        {/* 订单信息卡片 */}
        {orderInfo && (
          <div style={{
            backgroundColor: '#fff',
            borderRadius: '12px',
            padding: '20px',
            width: '100%',
            marginBottom: '32px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}>
            <div style={{
              fontSize: '16px',
              fontWeight: 'bold',
              color: '#333',
              marginBottom: '16px'
            }}>
              {t('payment.orderInfo')}
            </div>
            
            {orderInfo.orderId && (
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '8px'
              }}>
                <span style={{ color: '#666' }}>{t('payment.orderId')}:</span>
                <span style={{ color: '#333', fontWeight: 'bold' }}>{orderInfo.orderId}</span>
              </div>
            )}
            
            {orderInfo.amount && (
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '8px'
              }}>
                <span style={{ color: '#666' }}>{t('payment.amount')}:</span>
                <span style={{ color: '#FF6B35', fontWeight: 'bold' }}>
                  {orderInfo.amount.toLocaleString()} ₫
                </span>
              </div>
            )}
            
            {orderInfo.deviceId && (
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '8px'
              }}>
                <span style={{ color: '#666' }}>{t('payment.deviceId')}:</span>
                <span style={{ color: '#333', fontWeight: 'bold' }}>{orderInfo.deviceId}</span>
              </div>
            )}
            
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              marginBottom: '8px'
            }}>
              <span style={{ color: '#666' }}>{t('payment.paymentTime')}:</span>
              <span style={{ color: '#333', fontWeight: 'bold' }}>
                {new Date().toLocaleString()}
              </span>
            </div>
          </div>
        )}

        {/* 操作按钮 */}
        <div style={{ width: '100%' }}>
          <button
            onClick={handleViewOrder}
            style={{
              width: '100%',
              height: '48px',
              backgroundColor: '#FF6B35',
              color: '#fff',
              border: 'none',
              borderRadius: '24px',
              fontSize: '16px',
              fontWeight: 'bold',
              cursor: 'pointer',
              marginBottom: '12px',
              transition: 'all 0.2s'
            }}
          >
            {t('payment.viewOrder')}
          </button>
          
          <button
            onClick={handleBackToHome}
            style={{
              width: '100%',
              height: '48px',
              backgroundColor: 'transparent',
              color: '#666',
              border: '2px solid #E5E5E5',
              borderRadius: '24px',
              fontSize: '16px',
              fontWeight: 'bold',
              cursor: 'pointer',
              transition: 'all 0.2s'
            }}
          >
            {t('payment.backToHome')}
          </button>
        </div>
      </div>
    </Page>
  );
};

export default PaymentSuccessPage;
